<style>
	html {
		height: 100vh;
	}
	
	body {
		height: inherit;
		background: #2e576b;
		display: -ms-grid;
		display: grid;
	}
	
	.container {
		margin: auto;
	}
	
	.card {
		position: relative;
		width: 300px;
		height: 350px;
		background: #fff;
		border-radius: 2px;
		box-shadow: 0 2px 15px 3px rgba(0, 0, 0, 0.08);
		overflow: hidden;
	}
	
	.card::after {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		background: linear-gradient(to bottom, #0065a8, rgba(221, 238, 255, 0.4) 46%, rgba(255, 255, 255, 0.5));
	}
	
	.item {
		position: absolute;
		top: 3%;
		left: 50%;
		width: 400px;
		height: 400px;
		margin-top: -200px;
		margin-left: -200px;
		background: #0af;
		border-radius: 40%;
		opacity: .4;
		animation: shift 3s infinite linear;
	}
	
	.item.item-2 {
		background: yellow;
		opacity: 0.1;
		animation: shift 7s infinite linear;
	}
	
	.item.item-3 {
		background: crimson;
		opacity: 0.1;
		animation: shift 5s infinite linear;
	}
	
	@-webkit-keyframes shift {
		from {
			transform: rotate(360deg);
		}
	}
	
	@keyframes shift {
		from {
			transform: rotate(360deg);
		}
	}
</style>
<!--三个圆角正方形旋转-->
<div class="container">
	<div class="card">
		<div class="item item-1"></div>
		<div class="item item-2"></div>
		<div class="item item-3"></div>
	</div>
</div>